<template>
  <div>
    <!--标题模块 开始-->
    <van-nav-bar :title="title" left-arrow @click-left="$router.back()" />
    <!--标题模块 结束-->

    <!--数据筛选 开始-->
    <van-dropdown-menu active-color="#3190e8">
      <!--商铺分类 开始-->
      <van-dropdown-item :title="title" ref="item">
        <van-tree-select
          :items="categoryList"
          :active-id.sync="cateId"
          :main-active-index.sync="cateIndex"
          @click-item="curCateId()"
        >
        </van-tree-select>
      </van-dropdown-item>
      <!--商铺分类 结束-->
      <!--排序 开始-->
      <van-dropdown-item
        @change="orderFn"
        title="排序"
        v-model="orderValue"
        :options="orderBy"
      />
      <van-dropdown-item title="筛选" v-model="screening" ref="screening">
        <div class="screening">
          <p class="distribution">配送方式</p>
          <van-button
            :icon="delivery_mode ? 'success' : ''"
            :class="{ current: delivery_mode }"
            v-model="delivery_mode"
            @click="deliveryFn"
          >
            蜂鸟专送
          </van-button>
          <p class="shop_attrs">商家属性(可以多选)</p>
          <div class="btns">
            <van-button
              v-for="item in support"
              :key="item.id"
              :icon="support_ids.indexOf(item.id) != -1 ? 'success' : ''"
              :class="{ current: support_ids.indexOf(item.id) != -1 }"
              @click="changeSupportFn(item.id)"
            >
              {{ item.name }}
            </van-button>
          </div>
        </div>
        <div class="footer">
          <van-button type="default" @click="clearFn">清空</van-button>
          <van-button type="primary" @click="confirmFn">确定</van-button>
        </div>
      </van-dropdown-item>
      <!--排序 结束-->
    </van-dropdown-menu>
    <!--数据筛选 结束-->
    <!--商铺列表模块 开始-->
    <div class="main">
      <shopList :list="shopList"></shopList>
    </div>
    <!--商铺列表模块 结束-->
  </div>
</template>

<script>
import { getShopCate, getShopsList } from "@/api/shops";
import shopList from "@/components/shopList";
export default {
  components: {
    shopList,
  },
  data() {
    return {
      id: this.$route.query.id, //分类id
      title: this.$route.query.title, //分类名称
      categoryList: [], //商铺分类
      cateId: 0, //商铺分类id
      cateIndex: 0, //商铺分类索引
      orderValue: 0,
      orderBy: [
        { text: "智能排序", value: 4 },
        { text: "距离最近", value: 5 },
        { text: "销量最高", value: 6 },
        { text: "起送价最低", value: 1 },
        { text: "配送速度最快", value: 2 },
        { text: "评分最高", value: 3 },
      ],
      screening: 0, //筛选
      delivery_mode: false, //配送方式
      support_ids: [], //选中商家属性id
      support: [
        //商家属性
        {
          id: 8,
          name: "品牌商家",
        },
        {
          id: 7,
          name: "外卖保",
        },
        {
          id: 9,
          name: "准时达",
        },
        {
          id: 5,
          name: "新店",
        },
        {
          id: 3,
          name: "在线支付",
        },
        {
          id: 4,
          name: "开发票",
        },
      ],
      shopList: [], //商铺列表
    };
  },
  created() {
    //商铺分类
    getShopCate({
      latitude: 123,
      longitude: 123,
    }).then((res) => {
      //数据加工
      res.data.map((item) => {
        return (
          (item.text = item.name),
          ((item.badge = item.count),
          (item.children = item.sub_categories),
          item.sub_categories.forEach((item2) => (item2.text = item2.name)))
        );
      });
      this.categoryList = res.data;
      //获取商铺列表数据
      this.getShop();
    });
  },
  methods: {
    //封装获取商铺分类数据
    getShop() {
      getShopsList({
        latitude: 123,
        longitude: 123,
        restaurant_category_ids: [this.cateId],
        order_by: this.orderValue,
        delivery_mode: this.delivery_mode ? 1 : null,
        support_ids: this.support_ids,
      }).then((res) => {
        this.shopList = res.data;
      });
    },
    //选中分类
    curCateId() {
      let list = this.categoryList[this.cateIndex].children.find((item) => {
        return item.id == this.cateId;
      });
      this.title = list.name;
      this.getShop(); //更新数据
      this.$refs.item.toggle();
    },
    //选中排序
    orderFn() {
      this.getShop(); //更新数据
    },
    //确定
    confirmFn() {
      this.getShop(); //更新数据
      this.$refs.screening.toggle();
    },
    //配送方式
    deliveryFn() {
      this.delivery_mode = !this.delivery_mode;
    },
    //商家属性
    changeSupportFn(id) {
      let index = this.support_ids.indexOf(id);
      if (index != -1) {
        this.support_ids.splice(index, 1);
      } else {
        this.support_ids.push(id);
      }
    },
    //清空
    clearFn() {
      this.delivery_mode = false;
      this.support_ids = [];
    },
  },
};
</script>

<style lang="less" scoped>
.current {
  border: 1px solid #3190e8;
  color: #3190e8;
}
.footer {
  padding: 10px;
  display: flex;
  justify-content: space-between;
  background-color: #f1f1f1;
  /deep/.van-button {
    width: 46%;
    font-size: 20px;
    border-radius: 4px;
  }
}
.screening {
  padding: 14px;
  font-size: 13px;
  .distribution {
    margin-bottom: 14px;
    /deep/.van-button {
      border-radius: 2px;
      font-size: 13px;
      background-color: #fff;
    }
  }
  .btns {
    .van-button {
      margin-right: 6px;
      margin-bottom: 6px;
      width: 109px;
    }
  }
  .shop_attrs {
    padding: 14px 0;
  }
}
/deep/.van-nav-bar {
  background-color: #3190e8;
  .van-icon {
    color: #fff;
  }
  .van-nav-bar__title {
    color: #fff;
    font-weight: 700;
  }
}
/deep/.van-info {
  background-color: #cccccc;
  top: 11px;
  right: -35px;
}
/deep/.van-tree-select__item {
  padding-left: 0;
  margin-left: 16px;
  border-bottom: 1px solid #eee;
}
/deep/.van-sidebar-item--select::before {
  background-color: #3190e8;
}
/deep/.van-tree-select__item--active {
  color: #3190e8;
}
</style>